// 数据导出模块
class DataExport {
    constructor() {
        this.container = document.getElementById('data-export-container');
        this.init();
    }

    init() {
        if (!this.container) return;
        
        this.render();
        this.initEventListeners();
    }

    render() {
        const html = `
            <div class="space-y-6">
                <!-- 导出选项 -->
                <div class="bg-white p-4 rounded-lg shadow-sm">
                    <h4 class="text-lg font-medium text-gray-700 mb-4">导出选项</h4>
                    <div class="space-y-4">
                        <!-- 数据范围 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">数据范围</label>
                            <select id="export-range" class="w-full px-3 py-2 border rounded-lg">
                                <option value="all">全部数据</option>
                                <option value="custom">自定义范围</option>
                            </select>
                        </div>

                        <!-- 日期范围 -->
                        <div id="date-range" class="grid grid-cols-2 gap-4" style="display: none;">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">开始日期</label>
                                <input type="date" id="start-date" class="w-full px-3 py-2 border rounded-lg">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">结束日期</label>
                                <input type="date" id="end-date" class="w-full px-3 py-2 border rounded-lg">
                            </div>
                        </div>

                        <!-- 数据类型 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">数据类型</label>
                            <div class="space-y-2">
                                <label class="flex items-center">
                                    <input type="checkbox" class="form-checkbox" value="trading-records">
                                    <span class="ml-2">交易记录</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" class="form-checkbox" value="portfolio">
                                    <span class="ml-2">投资组合</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" class="form-checkbox" value="analysis">
                                    <span class="ml-2">分析报告</span>
                                </label>
                            </div>
                        </div>

                        <!-- 导出格式 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">导出格式</label>
                            <select id="export-format" class="w-full px-3 py-2 border rounded-lg">
                                <option value="csv">CSV</option>
                                <option value="excel">Excel</option>
                                <option value="json">JSON</option>
                                <option value="pdf">PDF</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 导出按钮 -->
                <div class="flex justify-end">
                    <button id="export-btn" class="btn-primary">
                        导出数据
                    </button>
                </div>
            </div>
        `;

        this.container.innerHTML = html;
    }

    initEventListeners() {
        // 数据范围切换
        const exportRange = document.getElementById('export-range');
        const dateRange = document.getElementById('date-range');
        
        if (exportRange && dateRange) {
            exportRange.addEventListener('change', (e) => {
                dateRange.style.display = e.target.value === 'custom' ? 'grid' : 'none';
            });
        }

        // 导出按钮点击
        const exportBtn = document.getElementById('export-btn');
        if (exportBtn) {
            exportBtn.addEventListener('click', () => {
                this.exportData();
            });
        }
    }

    async exportData() {
        try {
            const range = document.getElementById('export-range').value;
            const format = document.getElementById('export-format').value;
            const selectedTypes = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
                .map(cb => cb.value);

            if (selectedTypes.length === 0) {
                this.showNotification('请选择要导出的数据类型', 'error');
                return;
            }

            let data = {
                range,
                format,
                types: selectedTypes
            };

            if (range === 'custom') {
                const startDate = document.getElementById('start-date').value;
                const endDate = document.getElementById('end-date').value;

                if (!startDate || !endDate) {
                    this.showNotification('请选择日期范围', 'error');
                    return;
                }

                data.startDate = startDate;
                data.endDate = endDate;
            }

            // TODO: 实际导出逻辑
            console.log('导出数据:', data);
            this.showNotification('数据导出成功', 'success');
        } catch (error) {
            console.error('导出失败:', error);
            this.showNotification('导出失败，请重试', 'error');
        }
    }

    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `fixed bottom-4 right-4 p-4 rounded-lg shadow-lg z-50 ${
            type === 'error' ? 'bg-red-500' : 'bg-green-500'
        } text-white`;
        notification.textContent = message;

        document.body.appendChild(notification);

        setTimeout(() => {
            notification.remove();
        }, 3000);
    }
}

// 使用全局变量导出
window.DataExport = DataExport;